import {useMateRailDrop} from "../../../hooks/useMaterialDrop.ts";
import {useDrag} from "react-dnd";
import {CommonComponentProps} from "../../../../components/editor/interface.ts";
import {CSSProperties, useEffect, useRef} from "react";
import {ContainerDndAccept} from "../../DnDAccept.tsx";

export interface GridProps extends CommonComponentProps {
    id: number;
    name: string;
    styles?: CSSProperties;
    parentId?: number;
    children?: any;
    wrap:any
    gridAutoFlow:any
    gridTemplateColumns:any
    justifyContent:any
    alignContent:any
    justifyItems:any
    alineItems:any
    gap:any
}

const GridDev = (props: GridProps) => {
    const {id, name, styles} = props
    const GridRef = useRef<any>(null)
    const {canDrop, drop} = useMateRailDrop([...ContainerDndAccept], id)
    const [_, drag] = useDrag({
        type: "Grid",
        item: {
            name,
            id,
            dragType: 'move'
        }
    })
    const GridStyles = {
        gridAutoFlow:props.gridAutoFlow,
        gridTemplateColumns:`repeat(${props.gridTemplateColumns},1fr)`,
        justifyContent:props.justifyContent,
        alignContent:props.alignContent,
        justifyItems:props.justifyItem,
        alineItems:props.alignItems,
        gap:props.gap
    }
    useEffect(() => {
        if (!GridRef.current) return;
        drop(GridRef);
        drag(GridRef);
    }, []);
    return (
        <div data-component-id={id} ref={GridRef} style={{...styles,...GridStyles,}} className={`grid gap-10 p-[20px]  h-[auto] 
              ${canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`}>
            {
                // @ts-ignore
                props?.children?.length > 0 ? props.children : <div
                    className={'bg-gray-300 w-full h-[200px] min-h-[100%] flex justify-center items-center'}>将组件拖拽到此处</div>
            }
        </div>
    );
};

export default GridDev;